<template>
	<!-- financialmanagement财务管理 -->
	<view class="f_wp">
		<view class="head">
			<view class="top">
				<view>多米街收入统计</view>
				<image src="/static/group/time.png" mode="widthFix"></image>
			</view>
			<view class="bottom">
				<view class="menu">
					<view class="nav">
						<view class="nav_item" :class="{'nav_active':type==1}" @click="radioChange(1)">当日</view>
						<view class="nav_item" :class="{'nav_active':type==2}" @click="radioChange(2)">昨日</view>
						<view class="nav_item" :class="{'nav_active':type==3}" @click="radioChange(3)">7日</view>
						<view class="nav_item" :class="{'nav_active':type==4}" @click="radioChange(4)">本月</view>
					</view>
					<view class="time">
						<uni-datetime-picker v-model="datetimerange" type="daterange" @change="selectTime">
							<view class="flex_between" v-if="datetimerange[1]==''||datetimerange[1]==0">{{currentTime}}<text class="down">></text></view>
							<view v-else>{{datetimerange[0]}}至{{datetimerange[1]}}</view>
						</uni-datetime-picker>
					</view>
				</view>
				<view class="total">
					<view class="tit">优惠买单</view>
					<view class="num_list">
						<view class="num_item">
							<view class="number">{{Number(info.disorders.money).toFixed(2)}}</view>
							<view>总收入</view>
						</view>
						<view class="line"></view>
						<view class="num_item">
							<view class="number">{{info.disorders.ntotal}}</view>
							<view>已核销</view>
						</view>
						<view class="line"></view>
						<view class="num_item">
							<view class="number">{{info.disorders.ctotal}}</view>
							<view>待核销</view>
						</view>
					</view>
				</view>
				<view class="total">
					<view class="tit">团购订单</view>
					<view class="num_list">
						<view class="num_item">
							<view class="number">{{Number(info.groupOrders.money).toFixed(2)}}</view>
							<view>总收入</view>
						</view>
						<view class="line"></view>
						<view class="num_item">
							<view class="number">{{info.groupOrders.ntotal}}</view>
							<view>已核销</view>
						</view>
						<view class="line"></view>
						<view class="num_item">
							<view class="number">{{info.groupOrders.ctotal}}</view>
							<view>待核销</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="rubric">店铺明细</view>
		<view class="list">
			<view class="item" v-for="item in list" @click="$navTo('/pages/groupmenu/financialdetails?uid='+item.uid+'&type='+type)">
				<view class="shop">
					<image :src="item.logo"></image>
					<view class="s_info">
						<view class="s_tit"><text>{{item.shoptype}}</text>{{item.supname}}</view>
						<view class="s_dis">当前折扣：{{Number(item.discount).toFixed(2)}}折</view>
						<view class="s_limit">当前剩余额度：{{item.usemoney}}</view>
						<view class="s_total">合计实收：{{Number(item.allmoney).toFixed(2)}}</view>
					</view>
				</view>
				<view class="detail">
					<view class="d_tit">优惠买单（充值店）</view>
					<view class="d_list">
						<view class="d_item">
							<view class="d_num">{{Number(item.czOrders.money).toFixed(2)}}</view>
							<view>营业额</view>
						</view>
						<view class="d_line"></view>
						<view class="d_item">
							<view class="d_num">{{item.czOrders.total}}</view>
							<view>支付笔数</view>
						</view>
					</view>
				</view>
				<view class="detail">
					<view class="d_tit">优惠买单（自设折扣店）</view>
					<view class="d_list">
						<view class="d_item">
							<view class="d_num">{{Number(item.disOrders.total).toFixed(2)}}</view>
							<view>营业额</view>
						</view>
						<view class="d_line"></view>
						<view class="d_item">
							<view class="d_num">{{item.disOrders.total}}</view>
							<view>支付笔数</view>
						</view>
					</view>
				</view>
				<view class="detail detail2">
					<view class="d_tit">团购订单</view>
					<view class="d_list">
						<view class="d_item">
							<view class="d_num">{{Number(item.groupOrders.nmoney).toFixed(2)}}</view>
							<view>已核销金额</view>
						</view>
						<view class="d_line"></view>
						<view class="d_item">
							<view class="d_num">{{item.groupOrders.ntotal}}</view>
							<view>核销笔数</view>
						</view>
						<view class="d_line"></view>
						<view class="d_item">
							<view class="d_num">{{Number(item.groupOrders.cmoney).toFixed(2)}}</view>
							<view>待核销金额</view>
						</view>
						<view class="d_line"></view>
						<view class="d_item">
							<view class="d_num">{{item.groupOrders.ctotal}}</view>
							<view>核销笔数</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				info:[],
				list: [],
				datetimerange: ['', ''],
				currentTime: ''
			}
		},
		onLoad() {
			this.getNowDate();
			this.getInfo();
		},
		methods: {
			getInfo() {
				let obj = {
					type: this.type,
					begintime: this.datetimerange[0],
					endtime: this.datetimerange[1]
				}
				obj.begintime = Date.parse(obj.begintime) ? Date.parse(obj.begintime) : obj.begintime;
				obj.endtime = Date.parse(obj.endtime) ? Date.parse(obj.endtime) : obj.endtime;
				obj.begintime = parseInt(obj.begintime / 1000);
				obj.endtime = parseInt(obj.endtime / 1000);
				this.$axios('groupMoney/heads', 'POST', 'supplier', obj).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
				this.$axios('/groupMoney/query', 'POST', 'supplier', obj).then(res => {
					if (res.data.code == 200) {
						this.list = res.data.data.list;
					}
				})
				console.log(this.datetimerange[1])
			},
			selectTime(){
				this.type = 5;
				this.getInfo();
			},
			radioChange(id) {
				this.type = id;
				this.getInfo();
			},
			 getNowDate() {
			    const timeOne = new Date()
			    const year = timeOne.getFullYear()
			    let month = timeOne.getMonth() + 1
			    let day = timeOne.getDate()
			    month = month < 10 ? '0' + month : month
			    day = day < 10 ? '0' + day : day
				this.currentTime = `${year}-${month}-${day}`;
			  }
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBF8FE;
		color: $font-color-dark;
		padding-bottom: 120upx;
	}
	.f_wp{
		padding: 20rpx;
	}
	.head{
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		.top{
			height: 82rpx;
			background: $bg-color;
			border-radius: 12rpx 12rpx 0rpx 0rpx;
			color: #fff;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			image{
				width: 28rpx;
			}
		}
		.bottom{
			padding: 20rpx;
			.menu{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.nav{
					display: flex;
					.nav_item{
						width: 70rpx;
						height: 34rpx;
						line-height: 34rpx;
						background: #F4F4F4;
						border-radius: 4rpx;
						text-align: center;
						font-size: 20rpx;
						color: #999999;
						margin-right: 12rpx;
					}
					.nav_active{
						background: #F0E1FF;
						color: #8615E1;
					}
				}
				.time{
					height: 34rpx;
					background: #F0E1FF;
					border-radius: 4rpx;
					line-height: 34rpx;
					text-align: center;
					padding: 0 16rpx;
					color: #8615E1;
					font-size: 20rpx;
					.down{
						font-size: 24rpx;
						display: block;
						transform: rotateZ(90deg);
						margin-left: 6rpx;
					}
				}
			}
			.total{
				color: #333333;
				font-size: 28rpx;
				margin-top: 20rpx;
				.num_list{
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-size: 24rpx;
					margin-top: 16rpx;
					text-align: center;
					line-height: 1.6;
					white-space: nowrap;
					.num_item{
						width: 33%;
					}
					.number{
						font-size: 32rpx;
						font-weight: 600;
					}
					.line{
						width: 2rpx;
						height: 28rpx;
						background: #DEDEDE;
					}
				}
			}
		}
	}
	.rubric{
		font-size: 32rpx;
		font-weight: 600;
		padding: 20rpx 0;
	}
	.list{
		.item{
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 20rpx;
			.shop{
				display: flex;
				image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 12rpx;
				}
				.s_info{
					padding-left: 16rpx;
					font-size: 20rpx;
					.s_tit{
						font-weight: 600;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						margin-bottom: 6rpx;
						text{
							padding: 0 8rpx;
							height: 30rpx;
							line-height: 30rpx;
							background: #881AE1;
							border-radius: 4rpx;
							border: 2rpx solid #8615E1;
							font-size: 20rpx;
							color: #FFFFFF;
							font-weight: 400;
							margin-right: 10rpx;
						}
					}
					.s_dis{
						color: #8615E1;
					}
					.s_limit{
						color: #333333;
					}
					.s_total{
						color: #999999;
					}
				}
			}
			.detail{
				margin-top: 20rpx;
				.d_list{
					white-space: nowrap;
					text-align: center;
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 16rpx;
					.d_item{
						width: 49%;
						.d_num{
							font-weight: 600;
							font-size: 32rpx;
							margin-bottom: 6rpx;
						}
					}
					.d_line{
						width: 2rpx;
						height: 28rpx;
						background: #DEDEDE;
					}
				}
			}
			.detail2{
				.d_list{
					justify-content: space-between;
					.d_item{
						width: 24%;
					}
				}
			}
		}
	}
	
	
	
	
	.f_sz,
	.f_money {
		background-color: #fff;
		padding: 20upx;
	}

	.f_money {
		padding: 20upx 0;
	}

	.f_money,
	.f_rmb {
		display: flex;
		align-items: center;
	}

	.f_rmb {
		flex: 1;
	}

	.f_rmb view {
		flex: 1;
	}

	.f_rmb text {
		color: #0062CC;
		flex: 1;
	}

	.f_rmb text:nth-of-type(2) {
		margin-left: 20upx;
	}

	.f_bk {
		text-align: right;
	}

	.f_radio_group {
		padding: 0 20upx;
	}

	.f_item {
		display: flex;
		align-items: center;
		padding: 10upx 0;
	}

	.f_radio {
		transform: scale(0.8);
		margin-right: 10upx;
	}

	.f_l_item {
		border-top: 1px hsl(0, 0%, 87%) solid;
		display: flex;
		align-items: center;
		padding: 20upx;
	}

	.f_l_item image {
		border-radius: 10upx;
		height: 120upx;
		width: 120upx;
	}

	.f_l_info {
		padding: 0 20upx;
		width: calc(100% - 120upx);
		line-height: 40upx;
	}

	.f_l_money {
		padding: 0;
	}
</style>
